<template>
    <el-container>
        <!-- 顶部标题 -->
        <el-header class="header">
            <h1>检测案例展示</h1>
        </el-header>

        <!-- 主内容 -->
        <el-main>
            <el-row :gutter="20">
                <!-- 左侧分类 -->
                <el-col :span="6">
                    <el-menu class="menu" :default-active="selectedCategory" @select="handleCategorySelect">
                        <el-sub-menu v-for="(category, index) in categories" :key="index" :index="category.name">
                            <template #title>
                                <span>{{ category.title }}</span>
                            </template>
                            <el-menu-item v-for="(caseItem, i) in category.cases" :key="i" :index="caseItem.name">
                                {{ caseItem.title }}
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-col>

                <!-- 右侧案例详情 -->
                <el-col :span="18">
                    <div v-if="selectedCase" class="case-detail">
                        <h2>{{ selectedCase.title }}</h2>
                        <el-divider />
                        <h3>项目背景</h3>
                        <p>{{ selectedCase.background }}</p>
                        <h3>检测目标</h3>
                        <p>{{ selectedCase.objectives }}</p>
                        <h3>使用设备</h3>
                        <el-tag v-for="(device, i) in selectedCase.equipment" :key="i" type="success">
                            {{ device }}
                        </el-tag>
                        <h3>检测结果</h3>
                        <p>{{ selectedCase.results }}</p>
                        <h3>相关资料</h3>
                        <el-image v-for="(img, i) in selectedCase.images" :key="i" :src="img" fit="cover"
                            class="case-image" />
                        <video v-if="selectedCase.video" :src="selectedCase.video" controls class="case-video"></video>
                    </div>
                    <p v-else class="placeholder">请选择一个案例以查看详情。</p>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue';

//这里有一个监测屏幕宽度的设施，当期小于600px的时候，修改对应的数据
// const isMobile = ref(window.innerWidth <= 600);
// window.addEventListener('resize', () => {
//     isMobile.value = window.innerWidth < 600;
// });

const categories = ref([
    {
        name: 'ocean',
        title: '海洋环境监测案例',
        cases: [
            {
                name: 'ocean_case1',
                title: '案例 1：海洋温度监测',
                background: '针对某海域温度异常的长期监测需求，开展实时监测项目。',
                objectives: '监测海域温度变化趋势，预测潜在生态问题。',
                equipment: ['温度传感器', '多功能监测浮标'],
                results: '温度均值较正常高 2°C，已制定修复方案。',
                images: [
                  '/img/BA1.jpg',
                  '/img/BA2.jpg'
                ],
                video: '/video/BA.mp4',
            },
        ],
    },
    {
        name: 'pipeline',
        title: '海底管道检测案例',
        cases: [
            {
                name: 'pipeline_case1',
                title: '案例 2：海底石油管道裂缝检测',
                background: '针对某区域的石油管道裂缝展开检测，保障能源供应。',
                objectives: '定位管道裂缝位置，评估裂缝对管道运行的影响。',
                equipment: ['声呐扫描仪', 'ROV（遥控潜水器）'],
                results: '检测发现两处管道裂缝，已安排紧急修复。',
                images: [
                    '/img/BA3.jpg',
                    '/img/BA4.jpg'
                ],
            },
        ],
    },
]);

const selectedCategory = ref('ocean');
const selectedCase = ref(categories.value[0].cases[0]);

function handleCategorySelect(key) {
    const category = categories.value.find((cat) =>
        cat.cases.some((caseItem) => caseItem.name === key)
    );
    if (category) {
        selectedCategory.value = category.name;
        selectedCase.value = category.cases.find((caseItem) => caseItem.name === key);
    }
}
</script>

<style scoped>
.header {
    background-color: #003366;
    color: white;
    text-align: center;
    /* padding: 20px; */
    line-height: 20px;
}

.menu {
    height: 100%;
    background-color: #f5f5f5;
    border-right: 1px solid #e6e6e6;
}

.case-detail {
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.case-detail h2 {
    margin-top: 0;
}

.case-image {
    width: 300px;
    height: 200px;
    margin: 10px 10px 0 0;
}

.case-video {
    display: block;
    margin-top: 10px;
    width: 100%;
    max-width: 600px;
}

.placeholder {
    text-align: center;
    color: #888;
}
</style>